<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="lib/base.css">
    <script src="lib/jquery.js"></script>
    <script src="lib/masonry.pkgd.min.js"></script>
    <script src="lib/imagesloaded.pkgd.min.js"></script>

    <style>

        #main,#tiles{
            position:relative;
        }
        #tiles{
            margin:0 auto;
            width:800px;
        }
        #tiles li{
            float:left;
            width:48%;
            padding:4px;
            border:1px solid #dedede;
            border-radius:2px;
            background-color:#fff;
            cursor:pointer;

        }

        #tiles li.inactive{
            visibility:hidden;
            opacity:0;
        }
        #tiles li img{
            display:block;
            width:100%;
        }


        .load{
            display: none;
            position: absolute;
            top:101%;
            left:50%;
            transform: translateX(-50%);
        }

    </style>
</head>
<body>


<div id="main" role="main">
    <ul id="tiles">
        <!-- These are our grid blocks -->
        <li class="grid-item"><img src="../img/01.jpg"></li>
        <li class="grid-item"><img src="../img/02.jpg"></li>
        <li class="grid-item"><img src="../img/03.jpg"></li>
        <li class="grid-item"><img src="../img/01.jpg"></li>
        <li class="grid-item"><img src="../img/02.jpg"></li>
        <li class="grid-item"><img src="../img/03.jpg"></li>
        <li class="grid-item"><img src="../img/01.jpg"></li>
        <li class="grid-item"><img src="../img/02.jpg"></li>
        <li class="grid-item"><img src="../img/03.jpg"></li>
        <li class="grid-item"><img src="../img/04.jpg"></li>
        <li class="grid-item"><img src="../img/05.jpg"></li>
        <li class="grid-item"><img src="../img/06.jpg"></li>
        <li class="grid-item"><img src="../img/07.jpg"></li>
        <li class="grid-item"><img src="../img/08.jpg"></li>
        <li class="grid-item"><img src="../img/09.jpg"></li>
        <!-- End of grid blocks -->
    </ul>
    <p class="load">正在加载...</p>

    <input type="button" value="点击我" onclick="loads()">
</div>


<script>

    var gid = $('#tiles');

    var $container = $('#main');

    $container.imagesLoaded(function() {
        gid.masonry({
            // options
            animationOptions:false,
            isAnimated : true,
            itemSelector: '.grid-item',
            columnWidth: 20,
            transitionDuration: '0.8s',      // 改变位置或变为显示后，重布局变换的持续时间，时间格式为css的时间格式
            stagger: '0.03s',                // 重布局时网格并不是一起变换的，排在后面的网格比前一个延迟开始，该项设置延迟时间
            resize:true,                     // 改变窗口大小将不会影响布局
            initLayout: true,                // 初始化布局，设未true可手动初试化布局
        });
    });

    gid.on( 'layoutComplete', function( event, items ) {
        console.log( items.length );
        //gid.masonry('reloadItems');
    });

    function loads(){
        var $elem = $('<li class="grid-item"><img src="../img/01.jpg"></li>');
            gid.append($elem);
        $elem.imagesLoaded(function(){
            gid.masonry('appended',$elem);
        });
        //gid.masonry('reloadItems');
    }


</script>

</body>
</html>

























